<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="前端最牛逼 .vant"
      left-text="返回"
      right-text="添加"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 搜索输入框 -->
    <form action="/">
      <van-search
        v-model="val"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 搜索历史静态页面 -->
    <div class="search" v-show="flag">
      <van-row type="flex" justify="space-between">
        <van-col span="6">&nbsp;&nbsp;&nbsp;搜索历史</van-col>
        <van-col span="2">
          <van-icon name="delete" @click="deleteSearchList" />
        </van-col>
      </van-row>
      <van-divider v-show="toggle">暂无搜索历史</van-divider>
      <!-- 搜索历史标签 -->
      <van-tag v-for="item in searchList" :key="item.id">{{item}}</van-tag>
    </div>

    <!-- 商品列表 -->
    <van-swipe-cell :on-close="onClose" v-for="item in historyList" :key="item.id" v-show="!flag">
      <van-cell
        :border="false"
        :title="item.name"
        :value=" '商品上架时间:'+ item.ctime.substring(0, 10)"
      />
      <template slot="right">
        <van-button square type="danger" text="删除" @click="deleteList(item.id)" />
      </template>
    </van-swipe-cell>

    <!-- 底部bar -->
    <!-- 底部跳转区域 -->
    <van-tabbar v-model="active">
      <van-tabbar-item class="iconfont icon-index-fill" to="/home">首页</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-icon_zhanghao" to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="cart-o" info="0" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      flag: true,
      toggle: true,
      // 搜索数据
      val: "",
      // 搜索历史记录数组
      searchList: [],
      // 商品列表
      historyList: [],
      // 删除id的值
      id: "",
    };
  },
  methods: {
    onClickLeft() {
      // 返回
      this.$router.go(-1);
      // history.back()
    },
    // 点击右上角添加
    onClickRight() {
      // 跳转到添加页面
      this.$router.push("/addgoods");
    },

    // 搜索按钮点击回车
    async onSearch() {
      const { data: res } = await this.$http.get("/api/getprodlist");
      // 如果搜索关键字为空 直接返回
      if (this.val.length == 0) {
        return this.$toast("请输入搜索关键字!");
      }
      // console.log(res.message);
      // console.log(this.val);
      // 将搜索的数据加入到数组里面
      this.searchList.unshift(this.val);
      // console.log(this.searchList);

      if (res.status !== 0) {
        return this.$notify("搜索商品失败!");
      }
      // this.$notify({ type: "success", message: "搜索商品成功" });

      // 展现 historyList列表
      this.flag = false;
      this.historyList = res.message;
    },
    // 点击取消
    onCancel() {
      this.flag = true;
      // 展现搜索历史记录
      this.searchList;
    },
    // 点击删除标签 清空历史搜索标签
    deleteSearchList() {
      this.searchList = "";
    },
    // 点击删除按钮 获得删除id
    deleteList (id) {
      this.id = id
    },
    
    // 删除商品数据
    async onClose(clickPosition, instance) {
      switch (clickPosition) {
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          const result = await this.$dialog
            .confirm({
              message: "确定删除吗？"
            })
            .catch(err => {
              return err;
            });
          if (result != "confirm") {
            return this.$notify("取消删除");
          }
          // 发送请求删除数据
          const { data: res } = await this.$http.get("/api/delproduct/" + this.id)
          if(res.status != 0) {
            return
          }
    
          const index = this.historyList.findIndex(item=>item.id == this.id)
          
          console.log(index);
          console.log(this.historyList);
          
          this.historyList.splice(index,1)
          this.$notify({ type: 'primary', message: '删除成功' })
      }
    },
    
  },
  watch: {
      searchList:function(res) {
        if (res.length == 0) {
          this.toggle = true;
        } else {
          this.toggle = false;
        }
      }
    }
}
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #1989fa;
}
.van-nav-bar__title,
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #fff;
  font-size: 14px;
}
.search {
  margin-top: 20px;
  // display: none
}
.van-divider {
  margin-top: 30px;
}
.van-row {
  margin-bottom: 20px;
}
.van-tag {
  margin-left: 20px;
}
.van-cell__value span{
  display: inline-block;
  line-height: 48px
}
.van-button--danger  {
  height: 68px;
}
</style>
